<html>
<head>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <style type="text/css">
        .chart div {
          font: 10px sans-serif;
          background-color: steelblue;
          text-align: right;
          padding: 3px;
          margin: 1px;
          color: white;
        }

    </style>
</head>
<body>
<div class="chart"></div>

    <script type="text/javascript">

        
        var data = [30, 86, 168, 281, 303, 365];

        var x = d3.scale.linear().domain([0, d3.max(data)]).range([0, 450]);

        d3.select(".chart")
          .selectAll("div")
          .data(data)
            .enter()
            .append("div")
            .style("width", function(d) { return x(d) + "px"; })
            .text(function(d) { return d; });
    </script>
</body>
</html>